---
{
	"title": "Gestionnaire JSON",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Gérer des jeux de données et applique des correctifs JSON.",
	"tag": "jsonmanager",
	"parentdir": "wb-jsonmanager",
	"altLangPage": "jsonmanager-en.html",
	"dateModified": "2025-03-19"
}
---
<!--
<ul class="list-inline">
	<li><a class="btn btn-primary" href="jsonmanager-doc-fr.html">Documentation</a></li>
	<li><a class="btn btn-primary" href="https://github.com/wet-boew/GCWeb/issues/new?title=JSON%20Manager">Questions ou commentaires?</a></li>
</ul>
-->

<ul>
	<li>Exemple principal</li>
	<li><a href="multisource-fr.html">Plusieurs source de donnée afin de générer un tableau de donné</a></li>
</ul>
<div class="wb-prettify all-pre"></div>

<p>Gérer des jeux de données et applique des correctifs JSON.</p>

<h2>Appliquer des correctifs</h2>

<h3>Exemple 1</h3>

<div data-wb-jsonmanager='{
		"url": "demo/data-fr.json",
		"name": "exemple1",
		"patches": [
			{ "op": "wb-count", "path": "/produits", "set": "/nbproduit" },
			{ "op": "copy", "from": "/produits/0", "path": "/produit"},
			{ "op": "wb-nbtolocal", "path": "/prix", "suffix": "$" }
		]
	}'></div>
<p>Il y a <span data-json-replace="#[exemple1]/nbproduit">un nombre inconnu de</span> produits à un tarif unitaire de <span data-json-replace="#[exemple1]/prix">(N/D)</span>.</p>
<p>Mon premier produit est <span data-json-replace="#[exemple1]/produit">(inconnu)</span> et le produit original était <span data-json-replace="demo/data-fr.json#/produit">(inconnu)</span>.</p>

<div data-wb-jsonmanager='{
		"url": "demo/data-fr.json#/niveau1/niveau2",
		"name": "exemple2",
		"patches": [
			{ "op": "wb-toDateISO", "path": "/itm1" }
		]
	}'>
	<p>Correctif pour un tableau d'objets:</p>
	<ul data-wb-json='{
			"url": "#[exemple2]",
			"mapping": [
				{ "selector": "li", "value": "/itm1" }
			]
		}'>
		<template>
			<li></li>
		</template>
	</ul>
</div>

<details>
	<summary>Code source</summary>

	<h4>HTML</h4>
	<pre><code>&lt;div data-wb-jsonmanager='{
		&quot;url&quot;: &quot;demo/data-fr.json&quot;,
		&quot;name&quot;: &quot;exemple1&quot;,
		&quot;patches&quot;: [
			{ &quot;op&quot;: &quot;wb-count&quot;, &quot;path&quot;: &quot;/produits&quot;, &quot;set&quot;: &quot;/nbproduit&quot; },
			{ &quot;op&quot;: &quot;copy&quot;, &quot;from&quot;: &quot;/produits/0&quot;, &quot;path&quot;: &quot;/produit&quot;},
			{ &quot;op&quot;: &quot;wb-nbtolocal&quot;, &quot;path&quot;: &quot;/prix&quot;, &quot;suffix&quot;: &quot;$&quot; }
		]
	}'&gt;&lt;/div&gt;
&lt;p&gt;Il y a &lt;span data-json-replace=&quot;#[exemple1]/nbproduit&quot;&gt;un nombre inconnu de&lt;/span&gt; produits à un tarif unitaire de &lt;span data-json-replace=&quot;#[exemple1]/prix&quot;&gt;(N/D)&lt;/span&gt;.&lt;/p&gt;
&lt;p&gt;Mon premier produit est &lt;span data-json-replace=&quot;#[exemple1]/produit&quot;&gt;(inconnu)&lt;/span&gt; et le produit original était &lt;span data-json-replace=&quot;demo/data-fr.json#/produit&quot;&gt;(inconnu)&lt;/span&gt;.&lt;/p&gt;

&lt;div data-wb-jsonmanager='{
		&quot;url&quot;: &quot;demo/data-fr.json#/niveau1/niveau2&quot;,
		&quot;name&quot;: &quot;exemple2&quot;,
		&quot;patches&quot;: [
			{ &quot;op&quot;: &quot;wb-toDateISO&quot;, &quot;path&quot;: &quot;/itm1&quot; }
		]
	}'&gt;
	&lt;p&gt;Correctif pour un tableau d'objets:&lt;/p&gt;
	&lt;ul data-wb-json='{
			&quot;url&quot;: &quot;#[exemple2]&quot;,
			&quot;mapping&quot;: [
				{ &quot;selector&quot;: &quot;li&quot;, &quot;value&quot;: &quot;/itm1&quot; }
			]
		}'&gt;
		&lt;template&gt;
			&lt;li&gt;&lt;/li&gt;
		&lt;/template&gt;
	&lt;/ul&gt;
&lt;/div&gt;</code></pre>

	<h4>Fichier <code>demo/data-fr.json</code></h4>
	<pre><code>{
	"produit": "Bonjour le monde",
	"produits": [
		"Mon nouveau produit",
		"Mon deuxième produit",
		"Mon produit numéro 3",
		"Mon produit numéro 4"
	],
	"niveau1": {
		"niveau2": [
			{
				"itm1": "2016-11-30T07:53:56Z"
			},
			{
				"itm1": "2017-02-01T16:52:00Z"
			},
			{
				"itm1": "2013-09-08T14:14:14Z"
			}
		]
	},
	"prix": 1234.98
}</code></pre>
</details>

<h3>Exemple 2</h3>
<p>Cet exemple exploite les correctifs suivants&nbsp;: <code>patches</code>, <code>wb-swap</code> et <code>wb-toDateISO</code>.</p>

<div data-wb-jsonmanager='{
	"name": "swapEx",
	"url": [ "demo/events.json#/data/eventList", "demo/events-i18n.json" ],
	"patches": [
		{ "op": "patches", "path": "/items", "patches": [
			{ "op": "wb-swap", "path": "/eventLanguage", "ref": "/reference/language/{{page.language}}" },
			{ "op": "wb-swap", "path": "/province", "ref": "/reference/province/{{page.language}}" },
			{ "op": "wb-swap", "path": "/registrationStatus", "ref": "/reference/registrationStatus" },
			{ "op": "wb-toDateISO", "path": "/startDate" },
			{ "op": "wb-toDateISO", "path": "/endDate" },
			{ "op": "patches", "path": "/registeredPeople", "patches": [
				{ "op": "wb-swap", "path": "/prefLang", "ref": "/reference/language/{{page.language}}" }
			] }
		] }
	]
}'>
	<div data-wb-json='{
		"url": "#[swapEx]/items",
		"mapping": [
			{ "selector": "h4", "value": "/{{page.language}}title" },
			{ "selector": ".event-description", "value": "/{{page.language}}description/html", "isHTML": "true" },
			{ "selector": ".event-language", "value": "/eventLanguage" },
			{ "selector": ".event-start", "value": "/startDate" },
			{ "selector": ".event-end", "value": "/endDate" },
			{ "selector": ".event-location", "value": "/city" },
			{ "selector": ".event-status", "value": "/registrationStatus/{{page.language}}" },
			{ "selector": ".event-provinces", "value": "/province", "queryall": "li" },
			{ "selector": ".event-registered", "value": "/registeredPeople",
				"mapping": [
					{ "selector": "[data-language]", "value": "/prefLang" },
					{ "selector": "[data-name]", "value": "/name" }
				]
			}
		]
	}'>
		<template>
			<div>
				<h4></h4>
				<div class="event-description"></div>
				<p>Langue: <span class="event-language"></span></p>
				<p>De <span class="event-start"></span> à <span class="event-end"></span></p>
				<p>Emplacement: <span class="event-location"></span></p>
				<p>Statut: <span class="event-status"></span></p>
				<p>Province(s):</p>
				<ul class="event-provinces">
					<template>
						<li></li>
					</template>
				</ul>
				<p>Enregistré(s):</p>
				<ul class="event-registered">
					<template>
						<li><span data-name></span> (<span data-language></span>)</li>
					</template>
				</ul>
			</div>
		</template>
	</div>
</div>

<details>
	<summary>Code source</summary>

	<h4>HTML</h4>
	<pre><code>&lt;div data-wb-jsonmanager='{
	"name": "swapEx",
	"url": [ "demo/events.json#/data/eventList", "demo/events-i18n.json" ],
	"patches": [
		{ "op": "patches", "path": "/items", "patches": [
			{ "op": "wb-swap", "path": "/eventLanguage", "ref": "/reference/language/{{page.language}}" },
			{ "op": "wb-swap", "path": "/province", "ref": "/reference/province/{{page.language}}" },
			{ "op": "wb-swap", "path": "/registrationStatus", "ref": "/reference/registrationStatus" },
			{ "op": "wb-toDateISO", "path": "/startDate" },
			{ "op": "wb-toDateISO", "path": "/endDate" },
			{ "op": "patches", "path": "/registeredPeople", "patches": [
				{ "op": "wb-swap", "path": "/prefLang", "ref": "/reference/language/{{page.language}}" }
			] }
		] }
	]
}'>
	&lt;div data-wb-json='{
		"url": "#[swapEx]/items",
		"mapping": [
			{ "selector": "h4", "value": "/{{page.language}}title" },
			{ "selector": ".event-description", "value": "/{{page.language}}description/html", "isHTML": "true" },
			{ "selector": ".event-language", "value": "/eventLanguage" },
			{ "selector": ".event-start", "value": "/startDate" },
			{ "selector": ".event-end", "value": "/endDate" },
			{ "selector": ".event-location", "value": "/city" },
			{ "selector": ".event-status", "value": "/registrationStatus/{{page.language}}" },
			{ "selector": ".event-provinces", "value": "/province", "queryall": "li" },
			{ "selector": ".event-registered", "value": "/registeredPeople",
				"mapping": [
					{ "selector": "[data-language]", "value": "/prefLang" },
					{ "selector": "[data-name]", "value": "/name" }
				]
			}
		]
	}'>
		&lt;template>
			&lt;div>
				&lt;h4>&lt;/h4>
				&lt;div class="event-description">&lt;/div>
				&lt;p>Langue: &lt;span class="event-language">&lt;/span>&lt;/p>
				&lt;p>De &lt;span class="event-start">&lt;/span> à &lt;span class="event-end">&lt;/span>&lt;/p>
				&lt;p>Emplacement: &lt;span class="event-location">&lt;/span>&lt;/p>
				&lt;p>Statut: &lt;span class="event-status">&lt;/span>&lt;/p>
				&lt;p>Province(s):&lt;/p>
				&lt;ul class="event-provinces">
					&lt;template>
						&lt;li>&lt;/li>
					&lt;/template>
				&lt;/ul>
				&lt;p>Enregistré(s):&lt;/p>
				&lt;ul class="event-registered">
					&lt;template>
						&lt;li>&lt;span data-name>&lt;/span> (&lt;span data-language>&lt;/span>)&lt;/li>
					&lt;/template>
				&lt;/ul>
			&lt;/div>
		&lt;/template>
	&lt;/div>
&lt;/div></code></pre>

	<h4>Fichier <code>demo/events.json</code></h4>
	<pre><code>{
	"data": {
		"eventList": {
			"items": [
				{
					"entitle": "Event #1",
					"frtitle": "Évènement #1",
					"endescription": {
						"html": "&lt;p>This is a big description&lt;/p>\n"
					},
					"frdescription": {
						"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
					},
					"startDate": "2023-04-04T10:30:00.000-04:00",
					"endDate": "2023-04-06T10:30:06.000-04:00",
					"eventLanguage": "english",
					"province": [
						"alberta",
						"manitoba",
						"new_brunswick",
						"ontario"
					],
					"city": "Online",
					"registrationStatus": "open",
					"registeredPeople": [
						{
							"name": "John Smith",
							"prefLang": "english"
						},
						{
							"name": "Jimmy Neutron",
							"prefLang": "english"
						}
					]
				},
				{
					"entitle": "Event #2",
					"frtitle": "Évènement #2",
					"endescription": {
						"html": "&lt;p>This is a big description&lt;/p>\n"
					},
					"frdescription": {
						"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
					},
					"startDate": "2023-04-04T10:30:00.000-04:00",
					"endDate": "2023-04-06T10:30:06.000-04:00",
					"eventLanguage": "english",
					"province": [
						"british_columbia"
					],
					"city": "Vancouver",
					"registrationStatus": "open",
					"registeredPeople": [
						{
							"name": "Debbie Stark",
							"prefLang": "english"
						}
					]
				},
				{
					"entitle": "Event #3",
					"frtitle": "Évènement #3",
					"endescription": {
						"html": "&lt;p>This is a big description&lt;/p>\n"
					},
					"frdescription": {
						"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
					},
					"startDate": "2023-04-04T10:30:00.000-04:00",
					"endDate": "2023-04-06T10:30:06.000-04:00",
					"eventLanguage": "french",
					"province": [
						"quebec"
					],
					"city": "Ottawa",
					"registrationStatus": "closed",
					"registeredPeople": [
						{
							"name": "Pierre Tremblay",
							"prefLang": "french"
						},
						{
							"name": "Marc Gagnon",
							"prefLang": "french"
						},
						{
							"name": "Robert Côté",
							"prefLang": "french"
						}
					]
				}
			]
		}
	}
}</code></pre>

	<h4>Fichier <code>demo/events-i18n.json</code></h4>
	<pre><code>{
	"reference": {
		"language": {
			"en": {
				"english": "English",
				"french": "French"
			},
			"fr": {
				"english": "Anglais",
				"french": "Français"
			}
		},
		"province": {
			"en": {
				"alberta": "Alberta",
				"british_columbia": "British Columbia",
				"manitoba": "Manitoba",
				"new_brunswick": "New Brunswick",
				"newfoundland_labrador": "Newfoundland &amp; Labrador",
				"northwest_territories": "Northwest Territories",
				"nova_scotia": "Nova Scotia",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"prince_edward_island": "Prince Edward Island",
				"quebec": "Quebec",
				"saskatchewan": "Saskatchewan",
				"yukon": "Yukon"
			},
			"fr": {
				"alberta": "Alberta",
				"british_columbia": "Colombie-Britannique",
				"prince_edward_island": "Île-du-Prince-Édouard",
				"manitoba": "Manitoba",
				"new_brunswick": "Nouveau-Brunswick",
				"nova_scotia": "Nouvelle-Écosse",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"quebec": "Québec",
				"saskatchewan": "Saskatchewan",
				"newfoundland_labrador": "Terre-Neuve-et-Labrador",
				"northwest_territories": "Territoires du Nord-Ouest",
				"yukon": "Yukon"
			}
		},
		"registrationStatus": {
			"en": {
				"open": "Open",
				"closed": "Closed"
			},
			"fr": {
				"open": "Ouvert",
				"closed": "Fermé"
			}
		}
	}
}</code></pre>

	<h4>Résultat JSON</h4>
	<pre><code>{
	"items": [
		{
			"entitle": "Event #1",
			"frtitle": "Évènement #1",
			"endescription": {
				"html": "&lt;p>This is a big description&lt;/p>\n"
			},
			"frdescription": {
				"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
			},
			"startDate": "2023-04-04",
			"endDate": "2023-04-06",
			"eventLanguage": "English",
			"province": [
				"Alberta",
				"Manitoba",
				"New Brunswick",
				"Ontario"
			],
			"city": "Online",
			"registrationStatus": "Open"
		},
		{
			"entitle": "Event #2",
			"frtitle": "Évènement #2",
			"endescription": {
				"html": "&lt;p>This is a big description&lt;/p>\n"
			},
			"frdescription": {
				"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
			},
			"startDate": "2023-04-04",
			"endDate": "2023-04-06",
			"eventLanguage": "English",
			"province": [
				"British Columbia"
			],
			"city": "Vancouver",
			"registrationStatus": "Open"
		},
		{
			"entitle": "Event #3",
			"frtitle": "Évènement #3",
			"endescription": {
				"html": "&lt;p>This is a big description&lt;/p>\n"
			},
			"frdescription": {
				"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
			},
			"startDate": "2023-04-04",
			"endDate": "2023-04-06",
			"eventLanguage": "French",
			"province": [
				"Quebec"
			],
			"city": "Ottawa",
			"registrationStatus": "Closed"
		}
	],
	"reference": {
		"language": {
			"en": {
				"english": "English",
				"french": "French"
			},
			"fr": {
				"english": "Anglais",
				"french": "Français"
			}
		},
		"province": {
			"en": {
				"alberta": "Alberta",
				"british_columbia": "British Columbia",
				"manitoba": "Manitoba",
				"new_brunswick": "New Brunswick",
				"newfoundland_labrador": "Newfoundland &amp; Labrador",
				"northwest_territories": "Northwest Territories",
				"nova_scotia": "Nova Scotia",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"prince_edward_island": "Prince Edward Island",
				"quebec": "Quebec",
				"saskatchewan": "Saskatchewan",
				"yukon": "Yukon"
			},
			"fr": {
				"alberta": "Alberta",
				"british_columbia": "Colombie-Britannique",
				"prince_edward_island": "Île-du-Prince-Édouard",
				"manitoba": "Manitoba",
				"new_brunswick": "Nouveau-Brunswick",
				"nova_scotia": "Nouvelle-Écosse",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"quebec": "Québec",
				"saskatchewan": "Saskatchewan",
				"newfoundland_labrador": "Terre-Neuve-et-Labrador",
				"northwest_territories": "Territoires du Nord-Ouest",
				"yukon": "Yukon"
			}
		},
		"registrationStatus": {
			"en": {
				"open": "Open",
				"closed": "Closed"
			},
			"fr": {
				"open": "Ouvert",
				"closed": "Fermé"
			}
		}
	}
}</code></pre>
</details>

<h3>Exemple 3</h3>
<p>Cet exemple démontre une configuration avancée pour le chargement de fichiers sources multiples, avec la possibilité de spécifier l'emplacement de l'insertion du contenu dans l'ensemble de données du gestionnaire JSON.</p>

<div data-wb-jsonmanager='{
	"name": "mappingDataSource",
	"url": [
		"demo/data-fr.json",
		{
			"url": "demo/data-en.json#/products",
			"path": "/english/list"
		}
	]
}'></div>

<div class="row">
	<div class="col-md-6">
		<p>Liste des produits français</p>
		<ul data-wb-json='{
			"url": "#[mappingDataSource]/produits",
			"mapping": [
				{ "selector": "li" }
			]
		}'>
			<template>
				<li></li>
			</template>
		</ul>
	</div>
	<div class="col-md-6">
		<p>Liste des produits anglais</p>
		<ul lang="en" data-wb-json='{
			"url": "#[mappingDataSource]/english/list",
			"mapping": [
				{ "selector": "li" }
			]
		}'>
			<template>
				<li></li>
			</template>
		</ul>
	</div>
</div>

<details>
	<summary>Code source</summary>
	<pre><code>&lt;div data-wb-jsonmanager='{
	"name": "mappingDataSource",
	"url": [
		"demo/data-fr.json",
		{
			"url": "demo/data-en.json#/products",
			"path": "/english/list"
		}
	]
}'>&lt;/div>

&lt;div class="row">
	&lt;div class="col-md-6">
		&lt;p>Liste des produits français&lt;/p>
		&lt;ul data-wb-json='{
			"url": "#[mappingDataSource]/produits",
			"mapping": [
				{ "selector": "li" }
			]
		}'>
			&lt;template>
				&lt;li>&lt;/li>
			&lt;/template>
		&lt;/ul>
	&lt;/div>
	&lt;div class="col-md-6">
		&lt;p>Liste des produits anglais&lt;/p>
		&lt;ul lang="en" data-wb-json='{
			"url": "#[mappingDataSource]/english/list",
			"mapping": [
				{ "selector": "li" }
			]
		}'>
			&lt;template>
				&lt;li>&lt;/li>
			&lt;/template>
		&lt;/ul>
	&lt;/div>
&lt;/div></code></pre>
</details>

<h2>Afficher des résultats à partir d'un JSON RESTful API</h2>

<details>
	<summary>Code source</summary>

	<p>Consult the JSON RESTful API github result: <a href="https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility">https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility</a></p>

	<pre><code>&lt;h3&gt;Requête relié à l'accessibilité &lt;small&gt;WET-BOEW sur GitHub&lt;/small&gt;&lt;/h3&gt;

&lt;div class=&quot;row&quot;&gt;
&lt;aside id=&quot;aside&quot; class=&quot;col-md-8 col-md-push-2 well&quot; data-wb-jsonmanager='{
		&quot;url&quot;: &quot;https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility&quot;,
		&quot;name&quot;: &quot;github&quot;,
		&quot;patches&quot;: [
			{ &quot;op&quot;: &quot;wb-count&quot;, &quot;path&quot;: &quot;/rootArray&quot;, &quot;set&quot;: &quot;/nbissues&quot; },
			{ &quot;op&quot;: &quot;wb-last&quot;, &quot;path&quot;: &quot;/rootArray&quot;, &quot;set&quot;: &quot;/last&quot; },
			{ &quot;op&quot;: &quot;wb-first&quot;, &quot;path&quot;: &quot;/rootArray&quot;, &quot;set&quot;: &quot;/first&quot; },
			{ &quot;op&quot;: &quot;wb-toDateISO&quot;, &quot;path&quot;: &quot;/last/created_at&quot;, &quot;set&quot;: &quot;/oldest&quot; },
			{ &quot;op&quot;: &quot;wb-toDateISO&quot;, &quot;path&quot;: &quot;/first/created_at&quot;, &quot;set&quot;: &quot;/recent&quot; },
			{ &quot;op&quot;: &quot;add&quot;, &quot;path&quot;: &quot;/unhideme&quot;, &quot;value&quot;: &quot;hidden&quot; }
		],
		&quot;wraproot&quot;: &quot;rootArray&quot;
	}'&gt;

	&lt;h4 class=&quot;mrgn-tp-sm&quot;&gt;Vue d'ensemble&lt;/h4&gt;

	&lt;ul class=&quot;list-unstyled&quot;&gt;
		&lt;li&gt;Nombre de problèmes: &lt;span data-json-replace=&quot;#[github]/nbissues&quot;&gt;&lt;/span&gt;&lt;/li&gt;
		&lt;li&gt;Le plus récent: &lt;a lang=&quot;en&quot; class=&quot;hidden&quot; data-wb-json='[
				{
					&quot;url&quot;: &quot;#[github]/first/title&quot;,
					&quot;type&quot;: &quot;replace&quot;
				},
				{
					&quot;url&quot;: &quot;#[github]/first/html_url&quot;,
					&quot;type&quot;: &quot;attr&quot;,
					&quot;attr&quot;: &quot;href&quot;
				},
				{
					&quot;url&quot;: &quot;#[github]/unhideme&quot;,
					&quot;type&quot;: &quot;removeclass&quot;
				}
			]'&gt;&lt;/a&gt; (&lt;span data-json-replace=&quot;#[github]/recent&quot;&gt;inconnu&lt;/span&gt;)&lt;/li&gt;
		&lt;li&gt;Le plus ancien: &lt;a lang=&quot;en&quot; class=&quot;hidden&quot; data-wb-json='[
				{
					&quot;url&quot;: &quot;#[github]/last/title&quot;,
					&quot;type&quot;: &quot;replace&quot;
				},
				{
					&quot;url&quot;: &quot;#[github]/last/html_url&quot;,
					&quot;type&quot;: &quot;attr&quot;,
					&quot;attr&quot;: &quot;href&quot;
				},
				{
					&quot;url&quot;: &quot;#[github]/unhideme&quot;,
					&quot;type&quot;: &quot;removeclass&quot;
				}
			]'&gt;&lt;/a&gt; (&lt;span data-json-replace=&quot;#[github]/oldest&quot;&gt;inconnu&lt;/span&gt;)&lt;/li&gt;
	&lt;/ul&gt;
	&lt;p&gt;&lt;a href=&quot;https://github.com/wet-boew/wet-boew/issues?q=is%3Aopen+is%3Aissue+label%3A%22Work%3A+Accessibility%22&quot; hreflang=&quot;en&quot;&gt;Consulter les problèmes sur GitHub&lt;/a&gt;&lt;/p&gt;
&lt;/aside&gt;
&lt;/div&gt;

&lt;p&gt;Liste des problèmes:&lt;/p&gt;

&lt;div data-wb-jsonmanager='{
		&quot;url&quot;: &quot;https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility&quot;,
		&quot;name&quot;: &quot;github-src&quot;,
		&quot;patches&quot;: [

			{ &quot;op&quot;: &quot;wb-toDateISO&quot;, &quot;path&quot;: &quot;/updated_at&quot; }
		]
	}'&gt;&lt;/div&gt;

&lt;ul lang=&quot;en&quot; data-wb-json='{
		&quot;url&quot;: &quot;#[github-src]&quot;,
		&quot;mapping&quot;: [
			{ &quot;selector&quot;: &quot;a&quot;, &quot;value&quot;: &quot;/title&quot; },
			{ &quot;selector&quot;: &quot;a&quot;, &quot;value&quot;: &quot;/html_url&quot;, &quot;attr&quot;: &quot;href&quot; },
			{ &quot;selector&quot;: &quot;span&quot;, &quot;value&quot;: &quot;/updated_at&quot; }
		]
	}'&gt;
	&lt;template&gt;
		&lt;li&gt;(&lt;span&gt;&lt;/span&gt;) &lt;a href=&quot;&quot;&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;/template&gt;
&lt;/ul&gt;</code></pre>

</details>

<h3>Requête relié à l'accessibilité <small>WET-BOEW sur GitHub</small></h3>

<div class="row">
<aside id="aside" class="col-md-8 col-md-push-2 well" data-wb-jsonmanager='{
		"url": "https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility",
		"name": "github",
		"patches": [
			{ "op": "wb-count", "path": "/rootArray", "set": "/nbissues" },
			{ "op": "wb-last", "path": "/rootArray", "set": "/last" },
			{ "op": "wb-first", "path": "/rootArray", "set": "/first" },
			{ "op": "wb-toDateISO", "path": "/last/created_at", "set": "/oldest" },
			{ "op": "wb-toDateISO", "path": "/first/created_at", "set": "/recent" },
			{ "op": "add", "path": "/unhideme", "value": "hidden" }
		],
		"wraproot": "rootArray"
	}'>

	<h4 class="mrgn-tp-sm">Vue d'ensemble</h4>

	<ul class="list-unstyled">
		<li>Nombre de problèmes: <span data-json-replace="#[github]/nbissues"></span></li>
		<li>Le plus récent: <a lang="en" class="hidden" data-wb-json='[
				{
					"url": "#[github]/first/title",
					"type": "replace"
				},
				{
					"url": "#[github]/first/html_url",
					"type": "attr",
					"attr": "href"
				},
				{
					"url": "#[github]/unhideme",
					"type": "removeclass"
				}
			]'></a> (<span data-json-replace="#[github]/recent">inconnu</span>)</li>
		<li>Le plus ancien: <a lang="en" class="hidden" data-wb-json='[
				{
					"url": "#[github]/last/title",
					"type": "replace"
				},
				{
					"url": "#[github]/last/html_url",
					"type": "attr",
					"attr": "href"
				},
				{
					"url": "#[github]/unhideme",
					"type": "removeclass"
				}
			]'></a> (<span data-json-replace="#[github]/oldest">inconnu</span>)</li>
	</ul>
	<p><a href="https://github.com/wet-boew/wet-boew/issues?q=is%3Aopen+is%3Aissue+label%3A%22Work%3A+Accessibility%22" hreflang="en">Consulter les problèmes sur GitHub</a></p>
</aside>
</div>

<p>Liste des problèmes:</p>

<div data-wb-jsonmanager='{
		"url": "https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility",
		"name": "github-src",
		"patches": [

			{ "op": "wb-toDateISO", "path": "/updated_at" }
		]
	}'></div>

<ul lang="en" data-wb-json='{
		"url": "#[github-src]",
		"mapping": [
			{ "selector": "a", "value": "/title" },
			{ "selector": "a", "value": "/html_url", "attr": "href" },
			{ "selector": "span", "value": "/updated_at" }
		]
	}'>
	<template>
		<li>(<span></span>) <a href=""></a></li>
	</template>
</ul>

<h3>Contenu d'un fichier provenant de GitHub</h3>
<p>L'appel à l'API GitHub pour obtenir le contenu d'un fichier doit être effectué de la sorte&nbsp;:</p>
<pre><code>https://api.github.com/repos/[Nom-Organisation]/[Nom-Répertoire]/contents/[Chemin-Vers-Fichier]</code></pre>
<p><strong>Remarque&nbsp;:</strong> Veuillez prendre en considération que GitHub a une limite d'utilisation de son API, qui est présentement réglée à 60 par heure (sans identifiant).</p>
<div data-wb-jsonmanager='{
		"url": "https://api.github.com/repos/wet-boew/wet-boew/contents/src/plugins/data-ajax/ajax/data-ajax-extra-fr.html",
		"name": "githubCode",
		"patches": [
			{ "op": "wb-decodeUTF8Base64", "path": "/content", "set": "/raw" },
			{ "op": "copy", "from": "/raw", "path": "/escape" },
			{ "op": "wb-escapeHTML", "path": "/escape" }
		]
	}'>
	<div data-json-replace="#[githubCode]/raw">Contenu ici...</div>
	<h4>Contenu HTML échappé</h4>
	<pre><code data-json-append="#[githubCode]/escape"></code></pre>
</div>

<details>
<summary>Code source</summary>
<pre><code>&lt;div data-wb-jsonmanager=&apos;{
	&quot;url&quot;: &quot;https://api.github.com/repos/wet-boew/wet-boew/contents/src/plugins/data-ajax/ajax/data-ajax-extra-fr.html&quot;,
	&quot;name&quot;: &quot;githubCode&quot;,
	&quot;patches&quot;: [
		{ &quot;op&quot;: &quot;wb-decodeUTF8Base64&quot;, &quot;path&quot;: &quot;/content&quot;, &quot;set&quot;: &quot;/raw&quot; },
		{ &quot;op&quot;: &quot;copy&quot;, &quot;from&quot;: &quot;/raw&quot;, &quot;path&quot;: &quot;/escape&quot; },
		{ &quot;op&quot;: &quot;wb-escapeHTML&quot;, &quot;path&quot;: &quot;/escape&quot; }
	]
}&apos;&gt;
&lt;div data-json-replace=&quot;#[githubCode]/raw&quot;&gt;Contenu ici...&lt;/div&gt;
&lt;h4&gt;Contenu HTML échappé&lt;/h4&gt;
&lt;pre&gt;&lt;code data-json-append=&quot;#[githubCode]/escape&quot;&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;</code></pre>
</details>

<h2>Opération de correctifs JSON</h2>

<p>Les opération de correctifs JSON sont définie par <a href="https://tools.ietf.org/html/rfc6902" lang="en" hreflang="en">RFC6002 - JavaScript Object Notation (JSON) Patch</a> avec quelques ajout d'opération afin de combler les besoins du gestionnaire JSON. Détaillé dans la documentations, les opérations suivant sont supporté par défaut: <code>add</code>, <code>remove</code>, <code>replace</code>, <code>move</code>, <code>copy</code>, <code>test</code>, <code>wb-count</code>, <code>wb-first</code>, <code>wb-last</code>, <code>wb-decodeUTF8Base64</code>, <code>wb-escapeHTML</code>, <code>wb-toDateISO</code> and <code>wb-toDateTimeISO</code>.</p>

<h2>Débogage</h2>

<p>Vous pouvez utiliser le paramètre de configuration <code>&quot;debug&quot;: true</code> afin d'afficher après le gestionnaire json l'objet json modifier ainsi que la liste des correctifs appliqué. Le contenu JSON est affiché sans mise en forme.</p>

<p data-wb-jsonmanager='{
	"url": "demo/data-fr.json",
	"name": "exemple3",
	"patches": { "op": "wb-count", "path": "/produits", "set": "/nbproduit" },
	"debug": true
}'>Nombre de produits: <span data-json-replace="#[exemple3]/nbproduit">Non disponible</span></p>

<details>
	<summary>Code source</summary>
<pre><code>&lt;p data-wb-jsonmanager='{
	&quot;url&quot;: &quot;demo/data-fr.json&quot;,
	&quot;name&quot;: &quot;exemple3&quot;,
	&quot;patches&quot;: { &quot;op&quot;: &quot;wb-count&quot;, &quot;path&quot;: &quot;/produits&quot;, &quot;set&quot;: &quot;/nbproduit&quot; },
	&quot;debug&quot;: true
}'&gt;Nombre de produits: &lt;span data-json-replace=&quot;#[exemple3]/nbproduit&quot;&gt;Non disponible&lt;/span&gt;&lt;/p&gt;</code></pre>
</details>

<h2>Extraire les données des nœuds DOM pour créer l'objet JSON de la source de données</h2>
	<p>Utilisez <code>replace</code> et <code>mappage</code> sur la même source de données JSON</p>
<div data-wb-jsonmanager='{
	"name": "ex1",
	"extractor": [
					{ "selector": "title", "path": "pageTitle" },
					{ "selector": "h2", "path": "firstH2" },
					{ "selector": "h4", "path": "allH4", "selectAll": true }
				],
	"wraproot": "rootArray"
}'>
	<p> Le titre de la page est : <span data-json-replace="#[ex1]/rootArray/pageTitle">Non disponible</span></p>
	<p> Le premier H2 est : <span data-json-replace="#[ex1]/rootArray/firstH2">Non disponible</span></p>
	<p>Tous les H4 de la page :</p>
	<ul data-wb-json='{
						"url": "#[ex1]/rootArray/allH4",
						"mapping": [
							{ "selector": "li" }
						]
					}'>
		<template>
			<li></li>
		</template>
	</ul>
</div>

<details>
<summary>Afficher le code source</summary>
<pre><code>
&lt;p&gt;Utilisez &lt;code&gt;replace&lt;/code&gt; et &lt;code&gt;mapping&lt;/code&gt; sur la même source de données JSON&lt;/p&gt;

&lt;div data-wb-jsonmanager='{
		&quot;name&quot; : &quot;ex1&quot;,
		&quot;extractor&quot; : [
			{ &quot;selector&quot; : &quot;title&quot;, &quot;path&quot; : &quot;pageTitle&quot; },
			{ &quot;selector&quot; : &quot;h2&quot;, &quot;path&quot; : &quot;firstH2&quot;},
			{ &quot;selector&quot; : &quot;h4&quot;, &quot;path&quot; : &quot;allH4&quot;, &quot;selectAll&quot; : true}
		],
		&quot;wraproot&quot;: &quot;rootArray&quot;
	}'>
	&lt;p&gt;Le titre de la page est : &lt;span data-json-replace=&quot;#[ex1]/rootArray/pageTitle&quot;&gt;Non disponible&lt;/span&gt;&lt;/p&gt;
	&lt;p&gt;Le premier H2 est : &lt;span data-json-replace="#[ex1]/rootArray/firstH2&quot;&gt;Non disponible&lt;/span&gt;&lt;/p&gt;
	&lt;p&gt;Tous les H4 de la page :&lt;/p&gt;
	&lt;ul data-wb-json='{
			&quot;url&quot; : &quot;#[ex1]/rootArray/allH4&quot;,
				&quot;mapping&quot; : [
					{ &quot;selector&quot; : &quot;li&quot; }
				]
		}'>
		&lt;template&gt;
			&lt;li&gt;&lt;/li&gt;
		&lt;/template&gt;
	&lt;/ul&gt;
&lt;/div&gt;</code></pre>
</details>

<h3>Regrouper les sélecteurs sur la même source de données JSON</h3>
<p>La liste de description ci-dessous est la source des sélecteurs combinés :</p>
<dl data-dl="test">
	<dt data-td="data-title-1">Titre 1</dt>
	<dd>Description 1</dd>

	<dt data-td="data-title-2">Titre 2</dt>
	<dd>Description 2</dd>

	<dt>Titre 3</dt>
	<dd>Description 3</dd>
</dl>

<div data-wb-jsonmanager='{
		"name": "ex2",
		"url": "demo/data-en.json",
		"extractor": [
			{ "selector": "title", "path": "pageTitle" },
			{ "selector": "h2", "path": "firstH2" },
			{
				"selector": "dl[data-dl]",
				"path": "monGroup",
				"extractor": [
					{
						"selector": "dt",
						"path": "title",
						"attr":"data-td"
					},
					{
						"selector": "dd",
						"path": "desc"
					}

				]
			}
		]
}'>
	<p>Afficher dans un tableau les valeurs combinées des sélecteurs :</p>
	<table class="table table-striped">
		<thead>
			<tr data-wb-json='{
				"url": "#[ex2]/monGroup",
				"mapping": [
					{ "selector": "th", "value": "/title" }
				]
				}'>
				<template>
					<th></th>
				</template>
			</tr>
		</thead>
		<tbody>
			<tr data-wb-json='{
				"url": "#[ex2]/monGroup",
				"mapping": [
					{ "selector": "td", "value": "/desc" }
				]
				}'>
				<template>
					<td></td>
				</template>
			</tr>
		</tbody>
	</table>
	<p> Le titre de la page est: <span data-json-replace="#[ex2]/pageTitle">Indisponible</span></p>
	<p> Le premier H2 est: <span data-json-replace="#[ex2]/firstH2">Indisponible</span></p>
</div>
<details>
	<summary>Afficher le code source</summary>

	<h3>HTML</h3>
	<pre><code>
&lt;div data-wb-jsonmanager='{
		&quot;name&quot;: &quot;ex2&quot;,
		&quot;extractor&quot;: [
			{ &quot;selector&quot;: &quot;title&quot;, &quot;path&quot;: &quot;pageTitle&quot; },
			{ &quot;selector&quot;: &quot;h2&quot;, &quot;path&quot;: &quot;firstH2&quot; },
			{ &quot;selector&quot;: &quot;dl&#91;data-dl&#93;&quot;, &quot;path&quot;: &quot;monGroup&quot;, &quot;extractor&quot;: &#91;
				{
					&quot;selector&quot;: &quot;dt&quot;,
					&quot;path&quot;: &quot;title&quot;,
					&quot;attr&quot;:&quot;data-td&quot;
				},
				{
					&quot;selector&quot;: &quot;dd&quot;,
					&quot;path&quot;: &quot;desc&quot;
				} &#93;&quot;}
		]
	}'&gt;

	&lt;table class=&quot;table table-striped&quot;&gt;
		&lt;thead&gt;
			&lt;tr data-wb-json='{
				&quot;url&quot;: &quot;#[ex2]/monGroup&quot;,
				&quot;mapping&quot;: [
					{ &quot;selector&quot;: &quot;th&quot;, &quot;value&quot;: &quot;/title&quot; }
				]
				}'&gt;
				&lt;template&gt;
					&lt;th&gt;&lt;/th&gt;
				&lt;/template&gt;
			&lt;/tr&gt;
		&lt;/thead&gt;
		&lt;tbody&gt;
			&lt;tr data-wb-json='{
				&quot;url&quot;: &quot;#[ex2]/monGroup&quot;,
				&quot;mapping&quot;: [
					{ &quot;selector&quot;: &quot;td&quot;, &quot;value&quot;: &quot;/desc&quot; }
				]
				}'&gt;
				&lt;template&gt;
					&lt;td&gt;&lt;/td&gt;
				&lt;/template&gt;
			&lt;/tr&gt;
		&lt;/tbody&gt;
	&lt;/table&gt;
	&lt;p&gt; Le titre de la page est: &lt;span data-json-replace=&quot;#[ex2]/pageTitle&quot;&gt;Indisponible&lt;/span&gt;&lt;/p&gt;
	&lt;p&gt; Le premier H2 est: &lt;span data-json-replace=&quot;#[ex2]/firstH2&quot;&gt;Indisponible&lt;/span&gt;&lt;/p&gt;


&lt;/div&gt;</code></pre>
</details>


<h3>Extraire les valeurs des attributs de balises ou extraire toutes les valeurs de balises spécifiques :</h3>
<div data-wb-jsonmanager='{
		"name": "ex3",
		"extractor": [
						{ "path": "/formfields/pageTitle", "selector": "title" },
						{ "path": "/formfields/lang", "attr":"lang", "selector": "html" },
						{ "path": "/formfields/externalReferer", "interface": "referer" },
						{ "path": "/formfields/submissionPage", "interface": "locationHref" },
						{ "selector": "h2", "path": "allH2", "selectAll":true },
						{ "selector": "h3", "path": "allH3", "selectAll":true },
						{ "selector": "h1[data-not-found]", "path": "notfound" }
					],
		"patches": { "op": "wb-count", "path": "/allH3", "set": "/nbH3Total" }
	}'>
	<div data-wb-json='{
						"url": "#[ex3]/formfields",
						"mapping": [
								{ "selector": "input", "attr": "name", "value": "/@id" },
								{ "selector": "input", "attr": "value", "value": "/@value" }
						]
					}'>
		<template>
			<input type="text" name="" value="">
		</template>
	</div>
	<p>Tous les H2 de la page :</p>
	<ul data-wb-json='{
		"url": "#[ex3]/allH2",
		"mapping": [
			{ "selector": "li" }
		]
	}'>
		<template>
			<li></li>
		</template>
	</ul>
	<p>Tous les H3 de la page (<span data-json-replace="#[ex3]/nbH3Total">inconnu</span> instances) :</p>
	<ul data-wb-json='{
		"url": "#[ex3]/allH3",
		"mapping": [
					{ "selector": "li" }
				]
		}'>
		<template>
			<li></li>
		</template>
	</ul>
	<p>Retourne une valeur <code>null</code> lorsque l'élément n'est pas trouvé par le sélecteur CSS. Test (attendu l'affichage du mot 'fonctionne'):
		<span data-wb-json='{
				"url": "#[ex3]",
				"streamline": true,
				"mapping": [
					{
						"template": "[data-not-found-result]",
						"test": "fn:guessType",
						"assess": "/notfound",
						"expect": "undefined",
						"mapping": null
					}
				]
			}'>
			<template data-not-found-result>
				fonctionne
			</template>
		</span>
	</p>
</div>

<details>
<summary>Afficher le code source</summary>

<h3>HTML</h3>
<pre><code>
&lt;div data-wb-jsonmanager='{
		&quot;name&quot;: &quot;ex3&quot;,
		&quot;extractor&quot;: [
			{ &quot;path&quot;: &quot;/formfields/pageTitle&quot;, &quot;selector&quot;: &quot;title&quot; },
			{ &quot;path&quot;: &quot;/formfields/lang&quot;, &quot;attr&quot;:&quot;lang&quot;, &quot;selector&quot;: &quot;html&quot; },
			{ &quot;path&quot;: &quot;/formfields/externalReferer&quot;, &quot;interface&quot;: &quot;referer&quot; },
			{ &quot;path&quot;: &quot;/formfields/submissionPage&quot;, &quot;interface&quot;: &quot;locationHref&quot; },
			{ &quot;selector&quot;: &quot;h2&quot;, &quot;path&quot;: &quot;allH2&quot;, &quot;selectAll&quot;:true },
			{ &quot;selector&quot;: &quot;h3&quot;, &quot;path&quot;: &quot;allH3&quot;, &quot;selectAll&quot;:true }
		],
		&quot;patches&quot;: { &quot;op&quot;: &quot;wb-count&quot;, &quot;path&quot;: &quot;/allH3&quot;, &quot;set&quot;: &quot;/nbH3Total&quot; }
	}'&gt;

	&lt;div data-wb-json='{
		&quot;url&quot; : &quot;#[ex3]/formfields&quot;,
		&quot;mapping&quot; : [
			{ &quot;selector&quot; : &quot;input&quot;, &quot;attr&quot; : &quot;name&quot;, &quot;value&quot; : &quot;/@id&quot; },
			{ &quot;selector&quot; : &quot;input&quot;, &quot;attr&quot; : &quot;name&quot;, &quot;value&quot; : &quot;/@value&quot; }
		]
	}'>
		&lt;template&gt;
			&lt;input type=&quot;text&quot; name="" value=&quot;&quot; &gt;
		&lt;/template&gt;
	&lt;/div&gt;
	&lt;p&gt;Tous les H2 de la page :&lt;/p&gt;
	&lt;ul data-wb-json='{
			&quot;url&quot; : &quot;#[ex3]/allH2&quot;,
			&quot;mapping&quot; : [
			{ &quot;selector&quot; : &quot;li&quot; }
			]
		}'>
		&lt;template&gt;
			&lt;li&gt;&lt;/li&gt;
		&lt;/template&gt;
	&lt;/ul&gt;
	&lt;p&gt;Tous les H3 de la page (&lt;span data-json-replace=&quot;#[ex3]/nbH3Total&quot;&gt;inconnu&lt;/span&gt; instances):&lt;/p&gt;
	&lt;ul data-wb-json='{
		&quot;url&quot; : &quot;#[ex3]/allH3&quot;,
		&quot;mapping&quot; : [
			{ &quot;selector&quot;: &quot;li&quot; }
		]
		}'>
		&lt;template&gt;
			&lt;li&gt;&lt;/li&gt;
		&lt;/template&gt;
	&lt;/ul&gt;
	&lt;p&gt;Retourne une valeur &lt;code&gt;null&lt;/code&gt; lorsque l'élément n'est pas trouvé par le sélecteur CSS. Test (attendu l'affichage du mot 'fonctionne'):
		&lt;span data-wb-json='{
				&quot;url&quot;: &quot;#[ex3]&quot;,
				&quot;streamline&quot;: true,
				&quot;mapping&quot;: [
					{
						&quot;template&quot;: &quot;[data-not-found-result]&quot;,
						&quot;test&quot;: &quot;fn:guessType&quot;,
						&quot;assess&quot;: &quot;/notfound&quot;,
						&quot;expect&quot;: &quot;undefined&quot;,
						&quot;mapping&quot;: null
					}
				]
			}'&gt;
			&lt;template data-not-found-result&gt;
				fonctionne
			&lt;/template&gt;
		&lt;/span&gt;
	&lt;/p&gt;
&lt;/div&gt;</code></pre>
</details>

<h2>Exemple d'essaie spéciale</h2>
<p><a href="test-case-fr.html">Consulter la page d'exemple d'essaie spéciale</a></p>
